import { TagsInputDemos } from "@/lib/@docs/demos/src";
import { Layout } from "@/layout";
import { MDX_DATA } from "@/mdx";

export default Layout(MDX_DATA.TagsInput);

<ComboboxDisclaimer component="TagsInput" />

## Usage

`TagsInput` provides a way to enter multiple values. It can be used with suggestions or without them.
`TagsInput` is similar to [MultiSelect](/core/multi-select), but it allows entering custom values.

<Demo data={TagsInputDemos.usage} />

## Controlled

`TagsInput` value must be an array of strings, other types are not supported.
`onChange` function is called with an array of strings as a single argument.

```tsx
import { useState } from "react";
import { TagsInput } from "@mantine/core";

function Demo() {
  const [value, setValue] = useState<string[]>([]);
  return <TagsInput data={[]} value={value} onChange={setValue} />;
}
```

## Controlled search value

You can control search value with `searchValue` and `onSearchChange` props:

```tsx
import { useState } from "react";
import { TagsInput } from "@mantine/core";

function Demo() {
  const [searchValue, setSearchValue] = useState("");
  return (
    <TagsInput
      searchValue={searchValue}
      onSearchChange={setSearchValue}
      data={[]}
    />
  );
}
```

## Clearable

Set `clearable` prop to display the clear button in the right section. The button is not displayed
when:

- The component does not have a value
- The component is disabled
- The component is read only

<Demo data={TagsInputDemos.clearable} />

## Max selected values

You can limit the number of selected values with `maxTags` prop. This will not allow adding more values
once the limit is reached.

<Demo data={TagsInputDemos.maxTags} />

## Accept value on blur

By default, if the user types a value and blurs the input, the value is added to the list.
You can change this behavior by setting `acceptValueOnBlur` to `false`. In this case, the value is added
only when the user presses `Enter` or clicks on a suggestion.

<Demo data={TagsInputDemos.acceptValueOnBlur} />

## Allow duplicates

By default `TagsInput` does not allow to add duplicate values, but you can change this behavior by
setting `allowDuplicates` prop. Value is considered duplicate if it is already present in the `value` array,
regardless of the case and trailing whitespace.

<Demo data={TagsInputDemos.allowDuplicates} />

## Split chars

By default, `TagsInput` splits values by comma (`,`), you can change this behavior by setting
`splitChars` prop to an array of strings. All values from `splitChars` cannot be included in the final value.
Values are also splitted on paste.

Example of splitting by `,`, `|` and space:

<Demo data={TagsInputDemos.splitChars} />

## With suggestions

`TagsInput` can be used with suggestions, it will render suggestions list under input and allow to select
suggestions with keyboard or mouse. Note that user is not limited to suggestions, it is still possible to
enter custom values. If you want to allow values only from suggestions, use [MultiSelect](/core/multi-select) component instead.

<Demo data={TagsInputDemos.data} />

<ComboboxData component="TagsInput" />

<ComboboxFiltering component="TagsInput" />

<Demo data={TagsInputDemos.search} />

## Sort options

By default, options are sorted by their position in the data array. You can change this behavior
with `filter` function:

<Demo data={TagsInputDemos.sort} />

<ComboboxLargeData component="TagsInput" />

<Demo data={TagsInputDemos.limit} />

## renderOption

`renderOption` callback allows you to customize option rendering. It is called with option object.
The function must return a React node.

<Demo data={TagsInputDemos.renderOption} />

## Scrollable dropdown

By default, the options list is wrapped with [ScrollArea.Autosize](/core/scroll-area).
You can control dropdown max-height with `maxDropdownHeight` prop if you do not change the default settings.

If you want to use native scrollbars, set `withScrollArea={false}`. Note that in this case,
you will need to change dropdown styles with [Styles API](/styles/styles-api).

<Demo data={TagsInputDemos.scrollArea} />

## Group options

<Demo data={TagsInputDemos.groups} />

## Disabled options

When option is disabled, it cannot be selected and is ignored in keyboard navigation.
Note that user can still enter disabled option as a value. If you want to prohibit certain values,
use controlled component and filter them out in `onChange` function.

<Demo data={TagsInputDemos.disabledOptions} />

<ComboboxProps component="TagsInput" />

## Inside Popover

To use `TagsInput` inside popover, you need to set `withinPortal: false`:

<Demo data={TagsInputDemos.withinPopover} />

## Control dropdown opened state

You can control dropdown opened state with `dropdownOpened` prop. Additionally,
you can use `onDropdownClose` and `onDropdownOpen` to listen to dropdown opened state changes.

<Demo data={TagsInputDemos.dropdownOpened} />

## Dropdown position

By default, the dropdown is displayed below the input if there is enough space; otherwise it is displayed above the input.
You can change this behavior by setting `position` and `middlewares` props, which are passed down to the
underlying [Popover](/core/popover) component.

Example of dropdown that is always displayed above the input:

<Demo data={TagsInputDemos.dropdownPosition} />

## Dropdown animation

By default, dropdown animations are disabled. To enable them, you can set `transitionProps`,
which will be passed down to the underlying [Transition](/core/transition) component.

<Demo data={TagsInputDemos.dropdownAnimation} />

## Dropdown width

To change dropdown width, set `width` prop in `comboboxProps`. By default,
dropdown width is equal to the input width.

<Demo data={TagsInputDemos.dropdownWidth} />

## Dropdown padding

<Demo data={TagsInputDemos.dropdownPadding} />

## Dropdown shadow

<Demo data={TagsInputDemos.dropdownShadow} />

<InputSections component="TagsInput" />

<Demo data={TagsInputDemos.sections} />

## Input props

<InputFeatures component="TagsInput" element="input" />

<Demo data={TagsInputDemos.configurator} />

## Read only

Set `readOnly` to make the input read only. When `readOnly` is set,
`TagsInput` will not show suggestions and will not call `onChange` function.

<Demo data={TagsInputDemos.readOnly} />

## Disabled

Set `disabled` to disable the input. When `disabled` is set,
user cannot interact with the input and `TagsInput` will not show suggestions.

<Demo data={TagsInputDemos.disabled} />

## Error state

<Demo data={TagsInputDemos.error} />

<StylesApiSelectors component="TagsInput" />

<Demo data={TagsInputDemos.stylesApi} />

<GetElementRef component="TagsInput" refType="input" />

<InputAccessibility component="TagsInput" />

To set `aria-label` on the clear button, use `clearButtonProps`. Note that it is required
only when `clearable` is set.

```tsx
import { TagsInput } from "@mantine/core";

function Demo() {
  return (
    <TagsInput
      data={[]}
      clearable
      clearButtonProps={{
        "aria-label": "Clear input",
      }}
    />
  );
}
```
